<template>
  <div> 
    <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>系统管理</el-breadcrumb-item>
    <el-breadcrumb-item>疾病管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- Card卡片 -->
    <el-card class="box-card">
      <el-tabs value="first">
        <el-tab-pane label="疾病分类信息管理" name="first">
          <el-card class="box-card">
          <el-row :gutter="20">
            <el-col :span="9">
              <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getCategoryList">
                <el-button slot="append" icon="el-icon-search" @click="getCategoryList"></el-button>
              </el-input>
            </el-col>
            <el-col :span="9">
              <el-button type="primary" @click="addCategoryDialog = true">添加分类信息</el-button>
            </el-col> 
          </el-row>
          <el-table :data="tableData" style="width: 100%" height="350">
            <el-table-column label="疾病分类编码" prop="dicacode"></el-table-column>
            <el-table-column label="疾病分类名称" prop="dicaname"></el-table-column>
            <el-table-column label="疾病类型" prop="dicatype" :formatter="dicatypeFormat"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <!-- 插槽可以获取到当前行的数据{id} -->
                <el-button type="primary" size="mini" @click="showEditCategory(scope.row.id)">修改</el-button>
                <el-button type="danger"  size="mini" @click="removeCategoryById(scope.row.id)">删除</el-button>
                <el-button type="info" size="mini" @click="showDiseaseList(scope.row.id)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-dialog title="添加疾病分类信息" :visible.sync="addCategoryDialog" width="50%" @close="addCategoryDialogClosed">
            <el-form :model="addCategoryForm" ref="addCategoryRef" label-width="100px">
              <el-form-item label="疾病分类编码">
                <el-input v-model="addCategoryForm.dicacode" clearable></el-input>
              </el-form-item>
              <el-form-item label="疾病分类名称">
                <el-input v-model="addCategoryForm.dicaname" clearable></el-input>
              </el-form-item>
              <el-form-item label="疾病类型" prop="dicatype">
                <el-select v-model="addCategoryForm.dicatype" placeholder="请选择">
                  <el-option
                    v-for="item in dicaTypeName"
                    :key="item.id"
                    :label="item.value"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="显示顺序号">
                <el-input v-model="editCategoryForm.sequenceno" clearable></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="addCategoryDialog = false">取 消</el-button>
              <el-button type="primary" @click="categoryAdd" >确 定</el-button>
            </span>
          </el-dialog>
          <el-dialog title="修改疾病分类信息" :visible.sync="editCategoryDialog" width="50%" @close="editCategoryDialog = false">
            <el-form :model="editCategoryForm" ref="editCategoryRef" label-width="100px">
              <el-form-item label="疾病分类编码">
                <el-input v-model="editCategoryForm.dicacode" clearable></el-input>
              </el-form-item>
              <el-form-item label="疾病分类名称">
                <el-input v-model="editCategoryForm.dicaname" clearable></el-input>
              </el-form-item>
              <el-form-item label="疾病类型">
                <el-select v-model="editCategoryForm.dicatype" placeholder="请选择">
                  <el-option
                    v-for="item in dicaTypeName"
                    :key="item.id"
                    :label="item.value"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="显示顺序号">
                <el-input v-model="editCategoryForm.sequenceno" clearable></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="editCategoryDialog = false">取 消</el-button>
              <el-button type="primary" @click="editCategoryInfo" >确 定</el-button>
            </span>
          </el-dialog>
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[10, 20, 50, 100, 150]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">    
          </el-pagination>
          <!-- 显示疾病详情的对话框 -->
          <el-dialog title="疾病详细信息列表" :visible.sync="showDiseaseDialog" width="50%" @close="showDiseaseDialog=false">
            <!-- <el-card class="box-card">       -->
            <el-table :data="diseaseData" style="width: 100%"  height="300">
              <el-table-column label="疾病编码" prop="diseasecode"></el-table-column>
              <el-table-column label="疾病名称" prop="diseasename"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button @click="removeDiseaseById(scope.row.id)" type="danger" size="mini">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChange2"
              :current-page="queryInfo2.pagenum"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="queryInfo2.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total2">    
            </el-pagination>
          </el-dialog>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="疾病详细信息管理" name="second">
            <el-card class="box-card">
            <el-row :gutter="20">
              <el-col :span="9">
                <el-input placeholder="请输入内容" v-model="queryInfo2.query" clearable @clear="getDiseaseAll">
                  <el-button slot="append" icon="el-icon-search" @click="getDiseaseAll"></el-button>
                </el-input>
              </el-col>
              <el-col :span="9">
                <el-button type="primary" @click="addDiseaseDialog = true">添加疾病信息</el-button>
              </el-col> 
            </el-row>
            <el-table :data="diseaseAllData" style="width: 100%" height="350">
              <el-table-column type="index"></el-table-column>
              <el-table-column label="疾病编码" prop="diseasecode"></el-table-column>
              <el-table-column label="疾病名称" prop="diseasename"></el-table-column>
              <el-table-column label="国际ICD编码" prop="diseaseicd"></el-table-column>
              <el-table-column label="所属分类" prop="disecategory.dicaname"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button @click="showEditDisease(scope.row.id)" type="primary" size="mini">修改</el-button>
                  <el-button @click="removeDiseaseById(scope.row.id)" type="danger" size="mini">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
              @size-change="handleSizeChange3"
              @current-change="handleCurrentChange3"
              :current-page="queryInfo3.pagenum"
              :page-sizes="[10, 50, 100,200,500]"
              :page-size="queryInfo2.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total3">    
            </el-pagination>
            <el-dialog title="添加疾病信息" :visible.sync="addDiseaseDialog" width="50%" @close="addDiseaseDialog=false">
              <el-form :model="addDiseaseForm" ref="addDiseaseRef" label-width="100px">
                <el-form-item label="疾病编码">
                  <el-input v-model="addDiseaseForm.diseasecode" clearable></el-input>
                </el-form-item>
                <el-form-item label="疾病名称">
                  <el-input v-model="addDiseaseForm.diseasename" clearable></el-input>
                </el-form-item>
                <el-form-item label="国际ICD编码">
                  <el-input v-model="addDiseaseForm.diseaseicd" clearable></el-input>
                </el-form-item>
                <el-form-item label="所属分类">
                  <el-input v-model="addDiseaseForm.disecategoryid" clearable></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="addDiseaseDialog = false">取 消</el-button>
                <el-button type="primary" @click="DiseaseAdd" >确 定</el-button>
              </span>
            </el-dialog>
            <el-dialog title="修改疾病信息" :visible.sync="editDiseaseDialog" width="50%" @close="editDiseaseDialog=false">
              <el-form :model="editDiseaseForm" ref="editDiseaseRef" label-width="100px">
                <el-form-item label="疾病编码">
                  <el-input v-model="editDiseaseForm.diseasecode" clearable></el-input>
                </el-form-item>
                <el-form-item label="疾病名称">
                  <el-input v-model="editDiseaseForm.diseasename" clearable></el-input>
                </el-form-item>
                <el-form-item label="国际ICD编码">
                  <el-input v-model="editDiseaseForm.diseaseicd" clearable></el-input>
                </el-form-item>
                <el-form-item label="所属分类">
                  <el-input v-model="addDiseaseForm.disecategoryid" clearable></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="editDiseaseDialog = false">取 消</el-button>
                <el-button type="primary" @click="editDiseaseInfo" >确 定</el-button>
              </span>
            </el-dialog>    
            </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-card>  
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        diseaseData: [],
        //查询用户信息的参数
        queryInfo:{
          query:'',
          pagenum:1,
          pagesize:10
        },
        total:0,
        addCategoryForm:{
          dicacode:'',
          dicaname:'',
          dicatype:'',
          sequenceno:'',
        },
        editCategoryForm:{
          // id:'',
          dicacode:'',
          dicaname:'',
          dicatype:'',
          sequenceno:'',
        },
        addCategoryDialog:false,
        editCategoryDialog:false,
        queryInfo2:{
          id:'',
          query:'',
          pagenum:1,
          pagesize:10
        },
        total2:0,
        showDiseaseDialog:false,
        addDiseaseForm:{
          diseasecode:'',
          diseasename:'',
          diseaseicd:'',
          disecategoryid:'',
        },
        addDiseaseDialog:false,
        editDiseaseForm:{
          diseasecode:'',
          diseasename:'',
          diseaseicd:'',
          disecategoryid:'',
        },
        editDiseaseDialog:false,
        queryInfo3:{
          query:'',
          pagenum:1,
          pagesize:10
        },
        total3:0,
        diseaseAllData:[],

        dicaTypeName: [
        {
          id: 1,
          value: "西医",
        },
        {
          id: 2,
          value: "中医",
        }
        ],
        
      }
    },
    created() {
      this.getCategoryList();
      this.getDiseaseAll();
    },
    methods: {
      //获取疾病分类信息的列表
      async getCategoryList(){
        const {data:res} = await this.$http.post('disease/findDisecategoryByPage',this.queryInfo)
        if(res.meta.status != 200){
           return this.$message.error('获取疾病信息失败')
        }
        //如果是正常状态
          this.tableData = res.data;
          this.total = res.total
          console.log(this.tableData)
      },
      handleSizeChange(size){
        //console.log(size)
        this.queryInfo.pagesize = size
        //重新查询疾病的信息
        this.getCategoryList();
        this.getDiseaseAll()
      },
      handleCurrentChange(page){
        //console.log(page)
        this.queryInfo.pagenum = page
        //重新查询疾病的信息
        this.getCategoryList();
        this.getDiseaseAll()
      },
      addCategoryDialogClosed() {
        // 监听添加用户对话框的关闭事件
        this.$refs.addCategoryRef.resetFields()
        this.addCategoryForm.dicacode = ''
        this.addCategoryForm.dicaname = ''
        this.addCategoryForm.dicatype =''
      },
      //新增疾病分类
      async categoryAdd(){
        this.$refs.addCategoryRef.validate(async valid => {
          if (!valid) return
          // 可以发起添加用户的网络请求
          const { data: res } = await this.$http.post('disease/addCategory', this.addCategoryForm)

          if (res.meta.status == 201) {
            this.$message.error('添加疾病分类信息失败！')
          }

          this.$message.success('添加疾病分类信息成功！')
          // 隐藏添加疾病分类的对话框
          this.addCategoryDialog = false
          // 重新获取疾病分类列表数据
          this.getCategoryList()
          this.getDiseaseAll()
        })
      },
      //删除疾病分类的方法
      async removeCategoryById(id){
        // 弹框询问用户是否删除数据
        const confirmResult = await this.$confirm(
          '此操作将永久删除该分类, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(err => err)
        // 如果用户确认删除，则返回值为字符串 confirm
        // 如果用户取消了删除，则返回值为字符串 cancel
        if (confirmResult !== 'confirm') {
          return this.$message.info('已取消删除')
        }
        const { data: res } = await this.$http.delete('disease//deleteCategory',{params:{"id":id}})
        if (res.meta.status !== 200) {
          return this.$message.error('删除分类失败！')
        }
        this.$message.success('删除分类成功！')
        this.getCategoryList()
        this.getDiseaseAll()
      },
      //展示修改疾病分类对话框
      async showEditCategory(id){
        //根据id来查询疾病分类的信息
        const { data: res } = await this.$http.get('disease/selectCategoryOne',{
          params:{"id":id}
        })
        if (res.meta.status == 201) {
          return this.$message.error('查询疾病信息失败！')
        }
        //将获取到的数据保存到editForm中
        this.editCategoryForm = res.data
        //显示窗口
        this.editCategoryDialog=true
      },
      editCategoryDialogClosed() {
        this.$refs.editCategoryRef.resetFields()        
      },
      // 修改疾病分类信息并提交
      editCategoryInfo() {
        this.$refs.editCategoryRef.validate(async valid => {
          if (!valid) return
          // 发起修改疾病分类信息的数据请求
          const { data: res } = await this.$http.post('disease/updateCategory' ,
          {
            id:this.editCategoryForm.id,
            dicacode:this.editCategoryForm.dicacode,
            dicaname:this.editCategoryForm.dicaname,
            dicatype:this.editCategoryForm.dicatype,
            sequenceno:this.editCategoryForm.sequenceno,
          })
          if (res.meta.status != 200) {
            return this.$message.error('更新分类信息失败！')
          }
          // 关闭对话框
          this.editCategoryDialog = false
          // 刷新数据列表
          this.getCategoryList()
          this.getDiseaseAll()
          // 提示修改成功
          this.$message.success('更新分类信息成功！')
        })
      },
      //获取疾病详细信息的列表
      async getDiseaseList(){
        const {data:res} = await this.$http.post('disease/findDiseaseByPage',this.queryInfo2)
        if(res.meta.status != 200){
           return this.$message.error('获取分类信息失败')
        }
        //如果是正常状态
          this.diseaseData = res.data;
          this.total2 = res.total
          console.log(this.diseaseData)
      },
      handleSizeChange2(size){
        this.queryInfo2.pagesize = size
        this.getDiseaseAll();
        this.getCategoryList()
      },
      handleCurrentChange2(page){
        this.queryInfo2.pagenum = page
        this.getDiseaseAll();
        this.getCategoryList()
      },
      //展示疾病详细列表
      showDiseaseList(id){
        this.showDiseaseDialog=true
        console.log(id)
        this.queryInfo2.id = id
        this.getDiseaseAll()
      },
      //添加疾病信息
      async DiseaseAdd(){
        this.$refs.addDiseaseRef.validate(async valid => {
          if (!valid) return
          // 可以发起添加用户的网络请求
          const { data: res } = await this.$http.post('disease/addDisease', this. addDiseaseForm)

          if (res.meta.status == 201) {
            this.$message.error('添加疾病失败！')
          }

          this.$message.success('添加疾病成功！')
          // 隐藏添加用户的对话框
          this.addDiseaseDialog = false
          // 重新获取用户列表数据
          this.getDiseaseAll()
          this.getCategoryList()
        })
      },
      //删除疾病信息
      async removeDiseaseById(id){
        // 弹框询问用户是否删除数据
        const confirmResult = await this.$confirm(
          '此操作将永久删除该疾病, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(err => err)
        // 如果用户确认删除，则返回值为字符串 confirm
        // 如果用户取消了删除，则返回值为字符串 cancel
        if (confirmResult !== 'confirm') {
          return this.$message.info('已取消删除')
        }
        const { data: res } = await this.$http.delete('disease//deleteDisease',{params:{"id":id}})
        if (res.meta.status != 200) {
          return this.$message.error('删除疾病详细失败！')
        }
        this.$message.success('删除疾病成功！')
        this.getDiseaseAll()
        this.getCategoryList()
      },
      //展示修改疾病信息对话框
      async showEditDisease(id){
        //根据id来查询用户的信息
        const { data: res } = await this.$http.get('disease/selectDiseaseOne',{
          params:{"id":id}
        })
        if (res.meta.status != 200) {
          return this.$message.error('查询疾病信息失败！')
        }
        //将获取到的数据保存到editForm中
        this.editDiseaseForm = res.data
        //显示窗口
        this.editDiseaseDialog=true
      },
      //提交修改疾病详细
      async editDiseaseInfo(){
        this.$refs.editDiseaseRef.validate(async valid => {
          if (!valid) return
            // 发起修改用户信息的数据请求
          const { data: res } = await this.$http.post('disease/updateDisease' ,
          {
            id:this.editDiseaseForm.id,
            diseasecode:this.editDiseaseForm.diseasecode,
            diseasename:this.editDiseaseForm.diseasename,
            diseaseicd:this.editDiseaseForm.diseaseicd,
            disecategoryid:this.editDiseaseForm.disecategoryid
          })
          if (res.meta.status != 200) {
            return this.$message.error('更新疾病信息失败！')
          }
          // 关闭对话框
          this.editDiseaseDialog = false
          // 刷新数据列表
          this.getDiseaseAll()
          this.getCategoryList()
          // 提示修改成功
          this.$message.success('更新疾病信息成功！')
        })
      },
      async getDiseaseAll(){
        const {data:res} = await this.$http.post('disease/findAllDiseaseByPage',this.queryInfo3)
        if(res.meta.status != 200){
           return this.$message.error('获取分类信息失败')
        }
        //如果是正常状态
          this.diseaseAllData = res.data;
          this.total3 = res.total
          console.log(this.diseaseAllData)
      },
      handleSizeChange3(size){
        this.queryInfo3.pagesize = size
        this.getDiseaseAll();
      },
      handleCurrentChange3(page){
        this.queryInfo3.pagenum = page
        this.getDiseaseAll();
      },

      //替换数据
     //格式化疾病类型
    dicatypeFormat(row, column) {
      let typename;
      this.dicaTypeName.forEach(value => {
        if (row.dicatype == value.id) {
          typename = value.value;
        }
      });
      return typename;
    },
    
    },
  }
</script>

<style lang="less" scoped>
  
</style>